<template>
    <BlogHeader ref="header"/>
    <div id="user-center">
        <h3>更新资料信息</h3>
        <form>
            <div class="form-elem">
               <span>用户名：</span>
                <input type="text" v-model="username" placeholder="输入用户名">
            </div>
            <div class="form-elem">
               <span>新密码：</span>
                <input type="password" v-model="password" placeholder="输入密码">
            </div>
            <div class="form-elem">
                <button v-on:click.prevent="changeInfo">更新</button>
            </div>
            <div class="form-elem">
                <button v-on:click.prevent="showingDeleteAlert=true" class="delete-btn">删除用户</button>
                <div :class="{ shake: showingDeleteAlert }">
                    <button v-if="showingDeleteAlert" class="confirm-btn" @click.prevent="confirmDelete">
                        确定？
                    </button>
                </div>
            </div>
        </form>
    </div>

    <BlogFooter/>
</template>

<script>
    import axios from 'axios';
    import BlogHeader from '@/components/BlogHeader.vue';
    import BlogFooter from '@/components/BlogFooter.vue';
    import authorization from '@/utils/authorization';

    const storage = localStorage;
    export default {
        name: 'UserCenter',
        components: {BlogHeader, BlogFooter},
        data: function (){
            return {
                username: '',
                password: '',
                token: '',
                showingDeleteAlert: false,
            }
        },
        mounted(){
            this.username = storage.getItem('username.myblog');
        },
        methods: {
            changeInfo(){
                const that = this;
                // 验证登录状态
                authorization()
                    .then(function(response){
                        // 检查登录状态
                        // 若登录已过期则不执行后续操作
                        if(!response[0]){
                            alert('登录已过期，请重新登录');
                            return
                        }
                        console.log('change info start');
                        // 密码不能小于6位
                        if(that.password.length > 0 && that.password.length < 6){
                            alert('Password too short.');
                            return
                        }
                        // 旧的 username 用于向接口发送请求
                        const oldName = storage.getItem('username.myblog');
                        // 获取已填写的表单数据
                        let data = {};
                        if(that.username !==''){
                            data.username = that.username
                        }
                        if(that.password !==''){
                            data.password = that.password
                        }
                        // 获取令牌
                        that.token = storage.getItem('access.myblog');
                        // 发送更新数据到接口
                        axios
                            .patch('/api/user/' + oldName + '/',
                            data,
                            {
                                headers: {Authorization: 'Bearer' + that.token}
                            })
                            .then(function(response){
                                const name = response.data.username;
                                storage.setItem('username.myblog', name);
                                that.$router.push({name: 'UserCenter', params: {username: name}});
                                that.$refs.header.refresh();
                            })
                    });
            },
            confirmDelete(){
                const that = this;
                authorization()
                    .then(function (response){
                        if(response[0]){
                            // 获取令牌
                            that.token = storage.getItem('access.myblog');
                            axios
                                .delete('/api/user/' + that.username + '/',
                                {
                                   headers: {Authorization: 'Bearer' + that.token}
                                })
                                .then(function(){
                                    storage.clear();
                                    that.$router.push({name: 'Home'});
                                })
                        }
                    })
            }
        },
    }
</script>

<style scoped>
    #user-center {
        text-align: center;
    }
    .form-elem {
        padding: 10px;
    }
    input {
        height: 25px;
        padding-left: 10px;
    }
    button {
        height: 35px;
        cursor: pointer;
        border: none;
        outline: none;
        background: gray;
        color: whitesmoke;
        border-radius: 5px;
        width: 200px;
    }
    .confirm-btn {
        width: 80px;
        background-color: darkorange;
    }
    .delete-btn {
        background-color: darkred;
        margin-bottom: 10px;
    }
    .shake {
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    @keyframes shake {
        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
        }
        20%,
        80% {
            transform: translate3d(2px, 0, 0);
        }
        30%,
        50%,
        70% {
            transform: translate3d(-4px, 0, 0);
        }
        40%,
        60% {
            transform: translate3d(4px, 0, 0);
        }
    }
</style>